<template>
	<!-- <view class="" :style="{paddingTop:blindBoxheight+'rpx'}"> -->
	<view class="" :style="{paddingTop:blindBoxheight+'rpx'}">
		<!-- <view class="diamondMall_head p20" :style="{ background: bg_color,top:blindBoxheight+'rpx'}"> -->
		
		<view class="diamondMall_head plr-20 ptb-30" :style="{paddingTop:blindBoxheight+'rpx'}">
			<view class="size-30" :style="{opacity:textcolor}">
				<view class="flex" style="align-items: center;justify-content: flex-start;margin-top: -20rpx;">
					<image src="../../static/home/applogo.jpg" mode="widthFix" style="width: 80rpx;border-radius: 50%;"></image>
					<image style="width: 150rpx;margin-left: 20rpx;" src='../../static/home/yaoqingdaohang.png' mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="mt-60">
		
		</view>
		<!-- <view class="diamondMall_head p20" :style="{ background: bg_color,top:blindBoxheight+'rpx'}">
			<view class="size-30 center" :style="{opacity:textcolor}">
				<view class="" style="text-align: center;margin-top: -26rpx;">
					<image style="width: 300rpx;" src='../../static/home/yaoqingdaohang.png' mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="mt-60">

		</view> -->
		<!-- 轮播图 -->
		<u-swiper @click="toUrl" :list="banner" height="400" class="mb-22" style=""></u-swiper>
		<view class="container bg min100 plr-30 gray-2 pb-100" v-if="showpage == 0">
			<!-- 			<u-search placeholder="请输入搜索内容" @custom="toSearch" search-icon-color="#44ACFF" v-model="searchStr"
				placeholder-color="#999" color="#333" bg-color="#FFFFFF" :action-style=actionStyle></u-search> -->
			<view class="box_two" style="display: flex;align-items: center;justify-content: space-between;">
				<image class="image-bg" src="../../static/two-bg.png" mode=''>
					<view class="11" style="margin: 0 0 0 30rpx;">
						<view class="" style="width: 50rpx;height: 50rpx;">
							<image src="../../static/tuo-bg-wenzi.png" mode="" style="width: 100%;height: 100%;">
							</image>
						</view>
					</view>
					<view class="text_gonggao">
						<view id="demo">
							<swiper circular="true" style="height: 64rpx;" vertical="true" autoplay="true" interval="3000" duration="1000">
								<swiper-item v-for="(item,index) in ulList" :key="index">
									<view @click='handlechange(item.id)' class="gonggao_text">{{item.title}}</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view class="" style="margin: 0 30rpx 0 0;width: 20rpx;height: 20rpx;">
						<image @click="tofind()" src="../../static/all.png" mode=""
							style="width: 100%;height:100%;margin: 0 0 15rpx 0;">
						</image>
					</view>
			</view>
			<!-- <scroll-view class="scroll-view_H" scroll-x="true">
				<image class="my_banner " src="../../static/home/banner_1.jpg" mode="widthFix" @click="goInviteFriends()"></image>
				<image class="my_banner" src="../../static/home/banner_2.jpg" mode="widthFix" @click="handleshop()">
				</image>
				<image class="my_banner" src="../../static/home/banner_3.jpg" mode="widthFix"></image>
			</scroll-view> -->

			<view :class="{'st':true,'sticky-fixed':isF}"
				style="display: flex;  line-height: 80rpx;background-color: #FFF;">
				<view style="color:#000;position: relative;" class="size-34 ml-30 mb-14" v-for="(item, index) in tabs"
					:key="index">

					<view @click="changeTop(index)" :class="[topIndex==index?'activehom':'activehom1'] ">
						{{ item }}
					</view>
					<!-- :style="{ background: topIndex == index ? '#5BDCE5' : '#FFF'  }"
					 -->
					<view class="tabschange"></view>
				</view>
			</view>
			<!-- 数字藏品 -->
			<view v-if="topIndex == 0" class="allcollect" style="background-color:${this.topIndex=='0'?'red'} ;">
				<empty v-if="collectList.length == 0"></empty>
				<view style="" v-else v-for="(item, index) in collectList" :key="index" @click="goDetails(item.id)"
					class="collectitem">
					<view class="collectItem mb-30 size-22">
						<image class="collectImg" :src="item.image" mode="widthFix"></image>
						<view v-if="item.status == 1" class="itemTips status1 plr-8 ptb-8">
							{{ item.status_text }}
						</view>
						<view class="itemTips2 plr-8 ptb-8" v-if="item.status == 2">
							<view class="home_detail">
								<image src="../../static/index/index_detail.png" mode=""
									style="width: 40rpx;height: 40rpx;margin: 12rpx 0 0 0;"> </image>
								<view class="">
									{{ item.status_text }}
								</view>
							</view>
						</view>
						<view class="flex flex-start itemTips plr-8 ptb-8" v-if="item.status == 3"
							style="background: rgba(0,0,0,0.3);border-radius: 40rpx;padding: 8rpx 20rpx;">
							<view class="">
								{{ item.status_text }}
							</view>
						</view>
						<view class="itemTips plr-8 ptb-8 flex center" v-if="item.status == 4"
							style="background: rgba(0,0,0,0.3);border-radius: 40rpx;padding: 8rpx 20rpx;">
							<view class="">
								{{ item.status_text }}
							</view>
							<u-count-down :timestamp="item.diff_time" bg-color="background:transparent" color="#fff"
								font-size="24" separator-color="#fff" style="margin-left: 5rpx"></u-count-down>
						</view>
						<view class="plr-30 ptb-30">
							<view class="flex flex-start">
								<view class="size-36 gray workname" style="color: #000;">
									{{ item.name }}
								</view>
							</view>
							<view class="mtb-20 flex flex-start size-24">
								<view class="tipsLeft mr-20 plr-20 ptb-7 radius-6">
									{{ item.goods_category_name }}
								</view>
								<view class="flex flex-start mr-20">
									<view class="tipsLeft plr-20 ptb-7 radius-6"> 限量 </view>
									<view class="tipsRight ptb-7 plr-10" style="border-radius: 0 6rpx 6rpx 0;color: #AB6E28;">
										{{ item.stock }}
									</view>
								</view>
							</view>
							<view class="flex flex-between size-24">
								<view class="flex flex-start">
									<view class="size-26" style="color: #000;">by</view>
									<view class="size-26 gray ml-24 author" style="color: #000;">
										{{ item.author_name }}
									</view>
								</view>
								<view class="size-42" style="color: #000;"> ￥{{ item.price }} </view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 盲盒 -->
			<view v-if="topIndex == 1" class="allcollect">
				<image src="../../static/saleIcon.png" class="saleIcon" mode=""></image>
				<empty v-if="collectList.length == 0"></empty>
				<view style="" v-else v-for="(item, index) in collectList" :key="index"
					@click="goDetailsblindbox(item.id)" class="collectitem">
					<view class="collectItem mb-30 size-22">
						<image class="collectImg" :src="item.image" mode="widthFix"></image>
						<view v-if="item.status == 1" class="itemTips status1 plr-8 ptb-8">
							{{ item.status_text }}
						</view>
						<view class="itemTips2 plr-8 ptb-8" v-if="item.status == 2">
							<view class="home_detail">
								<image src="../../static/index/index_detail.png" mode=""
									style="width: 40rpx;height: 40rpx;margin: 12rpx 0 0 0;"> </image>
								<view class="">
									{{ item.status_text }}
								</view>
							</view>
						</view>
						<view class="flex flex-start itemTips plr-8 ptb-8" v-if="item.status == 3"
							style="background: rgba(0,0,0,0.3);border-radius: 40rpx;padding: 8rpx 20rpx;">
							<view class="">
								{{ item.status_text }}
							</view>
						</view>
						<view class="itemTips plr-8 ptb-8 flex center" v-if="item.status == 4"
							style="background: rgba(0,0,0,0.3);border-radius: 40rpx;padding: 8rpx 20rpx;">
							<view class="">
								{{ item.status_text }}
							</view>
							<u-count-down :timestamp="item.diff_time" bg-color="background:transparent" color="#fff"
								font-size="24" separator-color="#fff" style="margin-left: 5rpx"></u-count-down>
						</view>
						<view class="plr-30 ptb-30">
							<view class="flex flex-start">
								<view class="size-34 gray workname" style="color: #000;">
									{{ item.name }}
								</view>
							</view>
							<view class="mtb-20 flex flex-start">
								<view class="tipsLeft mr-20 plr-10 ptb-7 radius-6" style="color: #000;">
									{{ item.goods_category_name }}
								</view>
								<view class="flex flex-start mr-20">
									<view class="tipsLeft plr-10 ptb-7 radius-6" style="color: #000;"> 限量 </view>
									<view class="tipsRight red ptb-7 plr-5" style="border-radius: 0 6rpx 6rpx 0">
										{{ item.stock }}
									</view>
								</view>
							</view>
							<view class="flex flex-between" style="margin: 10rpx 0;">
								<view class="flex flex-start">
									<view class="" style="color: #000;">by</view>
									<view class="size-24 gray ml-24 author" style="color: #000;">
										{{ item.author }}
									</view>
								</view>
								<view class=" size-30" style="color: #000;"> ￥{{ item.price }} </view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<!-- 活动精选 -->
			<view v-if="topIndex == 2" class="">
				<!-- <empty v-if="collectList.length == 0"></empty> -->
				<view class="selected-box mt-20" v-for="(item,index) in selectedActivities"
					@click="godiamondMall(item)">
					<view class="selected" style="">
						<image class="photo radius-29" style="" :src="item.thumb" mode="aspectFill"></image>
					</view>
					<view class="p10" style="line-height: 50rpx;">
						<view class="black" style="">
							{{item.title}}
						</view>
						<view class="size-20">
							活动时间:{{item.s_date}}
						</view>
					</view>
				</view>

			</view>
			<!-- 实名认证 -->
			<view v-if="authShow" class="white flex flex-between radius-20 size-26 ptb-37 pl-40 pr-22 authWrap"
				style="background-color: #d4ecff">
				<view class="red"> 完成实名认证，抢购快人一步 </view>
				<view class="ptb-16 plr-28 authMid radius-35" style="color: #fff" @click="toAuth"> 实名认证 </view>
				<u-icon name="close" color="#9A9A9A" @click="closeAuth"></u-icon>
			</view>
			
			<!-- 平台手续费 -->
			<!-- <view v-if="payShow" class="white flex flex-between radius-20 size-26 ptb-37 pl-40 pr-22 authWrap"
				style="background-color: #d4ecff">
				<view class="red"> 第一次请先支付平台手续费 </view>
				<view class="ptb-16 plr-28 authMid radius-35" style="color: #fff" @click="toPremium"> 支付手续费 </view>
				<u-icon name="close" color="#9A9A9A" @click="payShow = false"></u-icon>
			</view> -->
			
			<!-- 开通钱包 -->
			<view v-if="walletShow" class="white flex flex-between radius-20 size-26 ptb-37 pl-40 pr-22 authWrap"
				style="background-color: #d4ecff">
				<view class="red"> 完成开通钱包，抢购快人一步 </view>
				<view class="ptb-16 plr-28 authMid radius-35" style="color: #fff" @click="toWallet"> 开通钱包 </view>
				<u-icon name="close" color="#9A9A9A" @click="walletShow = false"></u-icon>
			</view>
			
			<!-- 去登录 -->
			<view v-if="loginShow == true" class="red flex flex-between radius-20 size-26 ptb-37 pl-40 pr-22 authWrap">
				<view @click="toLogin"> 去登录，抢购快人一步 </view>
				<view class="flex flex-between">
					<view class="ptb-16 plr-28 authMid radius-35 mr-40" @click="toLogin"> 去登录 </view>
					<u-icon name="close" color="#9A9A9A" @click="loginShow = false"></u-icon>
				</view>
			</view>
			<tab></tab>
		</view>
		<view class="" v-if="showpage == 1">
			<view class="nomessage" v-if="list.length == 0">
				<empty></empty>
			</view>
			<view class="messagebox" v-if="list.length != 0" v-for="item in list">
				<view class="messagetit">
					{{item.title}}
				</view>
				<image :src="item.image" mode="widthFix" @click="todetail(item.id)"></image>
				<view class="">
					{{item.desc}}
				</view>
			</view>
			<tab></tab>
		</view>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue';
	import tab from '../../components/tab.vue';
	import {
		globalData
	} from "@/App.vue"
	export default {
		mounted() {
			// setInterval(this.startPlay, 2000)
		},
		components: {
			empty,
			tab,

		},
		data() {
			return {
				blindBoxheight: '',
				selectedActivities: [],
				scrollTop: 0,
				textcolor: '',
				bg_color: '',
				isF: false,
				id: "",
				ulList: [


				],
				play: false,

				arr: [
					// {val:'首页',active:true,index:0},
					// {val:'公告',active:false,index:1}
				],
				actionStyle: {
					'color': '#fff'
				},
				flag: false, //上拉加载
				loginShow: false,
				token: '',
				page: 1,
				status: 'more',
				authShow: false,
				walletShow : false,
				payShow: false,
				topIndex: 0,
				tabs: ['数字藏品', '盲盒', '活动精选'],
				banner: [],
				collectList: [],
				saleList: [],
				conList: [],
				searchStr: '',
				showpage: 0,
			};
		},
		onLoad() {
			let _that = this;
			uni.getSystemInfo({
				success(e) {
					// console.log(e.statusBarHeight, '123122222222222222222222');
					if (e.platform == "ios" || e.platform == "devtools") {
						_that.blindBoxheight = e.statusBarHeight + 45;
					} else {
						_that.blindBoxheight = e.statusBarHeight + 50;
					}
				}
			})
			console.log(getApp().globalData);
		},
		onShow() {
			this.consultingservice()
			this.token = uni.getStorageSync('token');
			if (this.token != '') {
				this.$http('api/user/userInfo').then(res => {
					uni.setStorageSync('phone', res.phone)
					if(res.is_heepay_auth == 0){
						this.walletShow = true;
						
					}else{
						this.walletShow = false;
						if (res.is_auth == 0) {
							this.authShow = true;
						} else {
							this.authShow = false;
						}
					}
					
				});
			} else {
				this.loginShow = true;
			}
			// 轮播图
			this.$http('api/index/bannerList').then(res => {
				this.banner = res;
				console.log(this.banner)
			});
			// // 公告
			// this.$http('api/index/noticeList').then(res => {
			// 	this.list = res;
			// })
			this.init();
		},
		onHide() {
			this.collectList = [];
			this.flag = false;
			this.status = 'more';
			this.page = 1;
		},
		onReachBottom() {
			if (!this.flag) {
				this.status = 'loading';
				this.page++;
				this.init();
			}
		},
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
				
			}, 1000);
			this.flag = false;
			this.page = 1;
			this.collectList = [];
			this.init();
		},
		// 吸顶
		onPageScroll(e) {
			let h = e.scrollTop
			if (h >= 0) {
				if (h <= 0) {
					this.bg_color = ''
					this.textcolor = ''
				} else if (20 < h && h <= 200) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				} else if (h > 300) {
					this.bg_color = '#fff'
					this.textcolor = "100%"
				}
			}
			// console.log(this.textcolor);

			// 		this.isF = true

			// 		if (this.yuanH > e.scrollTop) {
			// 			this.isF = false
			// 		} else {
			// 			this.isF = true
			// 		}

		},
		methods: {
			// 邀请好友
			goInviteFriends() {
				console.log(1);
				uni.navigateTo({
					url: '/pages/home/InviteFriends'
				})
			},
			// 跳转到积分商城
			handleshop() {
				uni.navigateTo({
					url: './diamondMall'
				})
			},
			// 咨询公告列表
			consultingservice() {
				this.$http('api/index/noticeList', {}).then(res => {
					console.log(res);
					this.ulList = res
				});
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			// 去发现
			tofind() {
				uni.switchTab({
					url: '../market/index'
				})
			},
			handlechange(id) {
				uni.navigateTo({
					url: './diamondDetail?id=' + id
				});
			},

			todetail(index) {
				uni.navigateTo({
					url: './message?id=' + index
					// url: '../home/bannerCon?id=' + index
				});
			},
			search() {
				uni.navigateTo({
					url: './search'
				});
			},
			navfn(item) {
				for (let i = 0; i < this.arr.length; i++) {
					this.arr[i].active = false
				}
				item.active = true
				this.showpage = item.index
			},
			toLogin() {
				uni.navigateTo({
					url: '../login/index'
				});
			},
			goCon(id) {
				uni.navigateTo({
					url: './conDetails?id=' + id
				});
			},
			// 支付手续费
			toPremium(){
				uni.navigateTo({
					url:'../my/premium'
				});
			},
			// 实名认证
			toAuth() {
				uni.navigateTo({
					url: '../my/realAuth'
				});
			},
			// 开通钱包
			toWallet(){
				this.$http('api/remittance/heepayWallet').then(res => {
					if(res.code==1){
						window.location.href = res.redirect_url
						// var url = res.redirect_url;
						// uni.navigateTo({
						// 	url: '../my/myWallet/webview?url=' + encodeURIComponent(JSON.stringify(url))
						// })
						
					}else{
						uni.showToast({
							title: res.result_msg,
							icon:'none'
						})
					}
				})
			},
			init(topIndex) {
				// console.log(this.topIndex);
				if (this.topIndex == 0) {
					this.$http('api/goods/goodsList', {
						page: this.page,
						pagesize: 10,
						search: this.searchStr
					}).then(res => {
						console.log(res.data);
						uni.stopPullDownRefresh();
						let data = res.data;
						if (data.length == 0) {
							this.flag = true;
							this.status = 'noMore';
						} else {
							this.collectList = this.collectList.concat(data);
							if (data.length < 10) {
								this.flag = true;
								this.status = 'noMore';
							}
						}
					});
				} else if (this.topIndex == 1) {
					// });
					this.$http('api/box/boxList', {
						page: this.page,
						pagesize: 10,
						search: this.searchStr
					}).then(res => {
						console.log(res.data);
						uni.stopPullDownRefresh();
						let data = res.data;
						if (data.length == 0) {
							this.flag = true;
							this.status = 'noMore';
						} else {
							this.collectList = this.collectList.concat(data);
							if (data.length < 10) {
								this.flag = true;
								this.status = 'noMore';
							}
						}
					});

				} else if (this.topIndex == 2) {
					this.$http('api/activity/index', {
						page: this.page,
						pagesize: 10,
						search: this.searchStr
					}).then(res => {
						console.log(res);
						this.selectedActivities = res
					});
				}
			},
			toUrl(index) {
				if(this.banner[index].content){
					uni.navigateTo({
						url: './bannerCon?id=' + this.banner[index].id
					});
				}
				
			},
			changeTop(index) {
				this.topIndex = index;
				this.saleList = [];
				this.conList = [];
				this.collectList = [];
				this.init();
			},
			goDetails(id) {
				uni.navigateTo({
					url: './homeDetails?id=' + id
				});
			},
			goDetailsblindbox(id) {
				// console.log(1);

				uni.navigateTo({
					url: './homeDetailBlindbox?id=' + id
				});
			},
			// 活动精选-详情页
			godiamondMall(item) {
				console.log(item);
				this.url = item.url
				this.id = item.id
				uni.navigateTo({
					url: `${item.url}`
				})
				console.log(`${item.url}`);
			},
			closeAuth() {
				this.authShow = false;
			},
			
			toSearch() {
				this.page = 1;
				this.collectList = [];
				this.$http('api/goods/goodsListSearch', {
					name: this.searchStr
				}).then(res => {
					uni.stopPullDownRefresh();
					let data = res.data;
					if (data.length == 0) {
						this.flag = true;
						this.status = 'noMore';
					} else {
						this.collectList = this.collectList.concat(data);
						if (data.length < 10) {
							this.flag = true;
							this.status = 'noMore';
						}
					}
				});
			}
		}
	};
</script>
<style lang="less" scoped>
	.activehom {
		color: #000;
		font-weight: bold;
		border-bottom: 4px solid #5DDBEB;
	}

	.activehom1 {
		// color: grey;
		font-size: 30rpx;
	}

	.my_banner {
		width: 250rpx;
		border-radius: 30rpx;
		margin: 0 20rpx 0 0rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.box {
		white-space: nowrap;
		display: flex;
		overflow: scroll;
	}

	.diamondMall_head {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 118rpx;
		background: #FFF;
	}

	.tabschange {
		height: 10Rpx;
		position: absolute;
		top: 70rpx;
		left: 0px;
		width: 100%;
		opacity: 0.7;
		// background: #5BDCE5;
		border-radius: 20rpx;

	}

	.sticky-fixed {
		/* #ifdef H5 */
		position: sticky;
		top: 44px;
		/* #endif */
		/* #ifndef H5 */
		position: fixed;
		top: 0;
		/* #endif */
		z-index: 999;
	}

	.selected-box {
		width: 100%;
		height: 360rpx;
		border: 1px solid #ECECEC;
		border-radius: 30rpx;
	}

	.selected {
		width: 100%;
		height: 220rpx;
	}

	.home_detail {
		width: 180rpx;
		height: 60rpx;
		background-color: rgba(0,0,0,0.4);
		border-radius: 40rpx;
		text-align: center;
		line-height: 64rpx;
		// opacity: 0.7;
		display: flex;
		justify-content: space-evenly;
		margin: 0px 0px 0px 0;
		view{
			font-size: 32rpx;
		}
	}


	.gonggao_text {
		color: #000 !important;
		overflow: hidden; //超出隐藏
		text-overflow: ellipsis; //溢出显示省略号
		white-space: normal; //常规默认，会折行
		display: -webkit-box;
		-webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
		-webkit-line-clamp: 2;
		/*内容限制的行数 需要几行写几就行*/
	}





	swiper {
		height: 60rpx;
	}



	.text_gonggao {
		text-indent: 1rem;
		font-size: 24rpx;
		width: 510rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		// height: 15px;
	}

	.image-bg {
		position: absolute;
		width: 100%;
		height: 100%;

	}

	.box_two {
		position: relative;
		height: 100rpx;
		border: 2rpx solid gainsboro;
		border-radius: 28rpx;
		margin: 0px 0px 20rpx 0;
	}

	.messagebox {
		width: 100%;
		height: 500rpx;
		color: white;

		.messagetit {
			text-align: center;
			font-weight: 700;
			font-size: 40rpx;
		}

		image {
			margin-top: 40rpx;
			width: 100%;
		}
	}

	.topbox {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
		position: relative;

		.navitem {
			.navtext .navtext1 {
				color: #d1d1d2;
				font-weight: 600;
				font-size: 30rpx;
			}

			.navtext1 {
				color: #fff;
			}

			.line {
				width: 40rpx;
				height: 6rpx;
				background: linear-gradient(90deg, #6bbeff, #e448f6);
				position: relative;
				top: -8rpx;
				margin: 0 auto;
				border-radius: 10rpx;
			}
		}

		image {
			position: absolute;
			right: 0rpx;
			top: 40rpx;
			width: 30rpx;
		}
	}

	.tipsLeft {
		background: #F5BA76;
		color: #fff;
	}

	.tipsRight {
		background: rgba(239, 170, 28, 0.3);
	}

	.allcollect {
		// display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.collectitem {
			// background-color: #000;
			margin-top: 20rpx;
			position: relative;
			border: 2rpx solid gainsboro;
			border-radius: 80rpx;
			// width: 48%;

			.collectItem {

				.itemTips {
					position: absolute;
					right: 20rpx;
					top: 20rpx;
					// border-radius: 50%;
					color: #fff;
					font-size: 32rpx;
					z-index: 100;
				}

				.itemTips2 {
					width: 110rpx;
					height: 110rpx;
					position: absolute;
					right: 90rpx;
					top: 20rpx;
					// border-radius: 50%;
					color: #fff;
					// font-size: 22rpx;
					z-index: 100;

					.sellout {
						width: 120%;
					}
				}

				.status1 {
					background: rgba(0,0,0,0.3);
					// background: linear-gradient(to right, rgb(68, 172, 255), rgb(68, 172, 255));
					border-radius: 20rpx;
					border-radius: 40rpx;
					padding: 8rpx 20rpx;
				}
			}

		}

		.workname {
			color: #fff;
		}

		.author {
			color: #fff;
		}
	}

	.homeImg {
		width: 284rpx;
		height: 60rpx;
	}

	.lineImg {
		width: 40rpx;
		height: 14rpx;
	}

	.tabActive {
		color: #fff;
		font-size: 34rpx;
		font-family: 600;
	}

	.collectImg {
		width: 100%;
		height: 690rpx;
		border-radius: 60rpx;
	}

	.homeIcon {
		width: 30rpx;
		height: 30rpx;
	}

	.itemTips {}

	.tipsLeft {
		background: #F5BA76;
		color: #fff;
	}

	.tipsRight {
		background: rgba(239, 170, 28, 0.3);
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.saleIcon {
		width: 246rpx;
		height: 30rpx;
		margin: 30rpx auto;
		display: block;
	}

	.saleImg {
		width: 200rpx;
		height: 200rpx;
	}

	.conImg {
		width: 100%;
		height: 358rpx;
	}

	.authWrap {
		position: fixed;
		bottom: 140rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;
		background: rgba(212, 236, 255, 0.3);
		width: 690rpx;

		.authMid {
			background: #44acff;
			color: #fff;
		}
	}

	::v-deep  .u-indicator-item-round-active {
		background-color: #44acff !important;
	}
</style>
